---
title: Återkoppling
image: /images/user-guide/emails/emails_header.png
---

<Frame>
  <img src="/images/user-guide/emails/emails_header.png" alt="Header" />
</Frame>

Visar framsteg eller nedräkning och rör sig från höger till vänster.

<Tabs>

<Tab title="Usage">

```jsx
import { ProgressBar } from "twenty-ui/feedback";

export const MyComponent = () => {
  return (
    <ProgressBar
      duration={6000}
      delay={0}
      easing="easeInOut"
      barHeight={10}
      barColor="#4bb543"
      autoStart={true}
    />
  );
};
```

</Tab>

<Tab title="Props">

| Egenskaper  | Typ     | Beskrivning                                                                | Standard  |
| ----------- | ------- | -------------------------------------------------------------------------- | --------- |
| varaktighet | nummer  | Den totala varaktigheten för framstegsanimeringen i millisekunder          | 3         |
| delay       | nummer  | Fördröjningen vid start av framstegsanimeringen i millisekunder            | 0         |
| easing      | string  | Easing-funktionen för framstegsanimeringen                                 | easeInOut |
| barHeight   | nummer  | The height of the bar in pixels                                            | 24        |
| barColor    | string  | The color of the bar                                                       | gray80    |
| autoStart   | boolean | Om `true`, startar framstegsanimeringen automatiskt när komponenten laddas | `sant`    |

</Tab>
</Tabs>

## Cirkulär framstegsindikator

Visar framsteg för en uppgift, används ofta på laddningsskärmar eller områden där du vill kommunicera pågående processer till användaren.

<Tabs>

<Tab title="Usage">

```jsx
import { CircularProgressBar } from "@/ui/feedback/progress-bar/components/CircularProgressBar";

export const MyComponent = () => {
  return <CircularProgressBar size={80} barWidth={6} barColor="green" />;
};
```

</Tab>

<Tab title="Props">

| Egenskaper | Typ    | Beskrivning                                    | Standard     |
| ---------- | ------ | ---------------------------------------------- | ------------ |
| storlek    | nummer | Storleken på den cirkulära framstegsindikatorn | 50           |
| barWidth   | nummer | The width of the progress bar line             | 5            |
| barColor   | string | The color of the progress bar                  | currentColor |

</Tab>

</Tabs>
